import React from 'react';
import { Card, Row, Col } from 'antd';
import ScaleBar from '../ScaleBar';
import { TaskLine } from '../charts';
import styles from './style.less';

const formatTip = (type, num, percentage, unit = '个') => `${type}：${num}${unit}，${percentage}`;

const StaffCard = ({ data = {}, query }) => {
    const {
        workloadDoneNum = 0,
        workloadDoneRateStr = '0%',

        workloadExecutingNum = 0,
        workloadExecutingRateStr = '0%',

        workloadNonexecutionNum = 0,
        workloadNonexecutionRateStr = '0%',

        normalDoneTaskNum = 0,
        normalDoneRateStr = '0%',

        overdueDoneTaskNum = 0,
        overdueDoneRateStr = '0%',

        overdueNonexecutionTaskNum = 0,
        overdueNonexecutionRateStr = '0%',

        companyTaskDateVOList = []
    } = data;

    const getLink = (status, complete) => ({
        pathname: '/stat/workStat/workOverview/work/task',
        query: { ...query, taskStatus: status, taskCompleteStatus: complete }
    });

    return (
        <Card title="任务与工作量分析">
            <Row style={{ height: 280 }}>
                <Col span={12} style={{ paddingRight: 24 }}>
                    <Row>
                        <div className={styles.subTitle} style={{ marginTop: 24 }}>
                            工作执行量分布
                        </div>
                        <ScaleBar
                            scaleData={[
                                {
                                    text: `已完成 ${workloadDoneNum} 小时，${workloadDoneRateStr}`,
                                    style: { backgroundColor: '#FFA808', width: workloadDoneRateStr },
                                    tip: formatTip('已完成', workloadDoneNum, workloadDoneRateStr, '小时'),
                                    link: getLink('完成', ''),
                                    hide: Number(workloadDoneNum) === 0
                                },
                                {
                                    text: `进行中 ${workloadExecutingNum} 小时，${workloadExecutingRateStr}`,
                                    style: {
                                        backgroundColor: '#FFC53D',
                                        width: workloadExecutingRateStr
                                    },
                                    tip: formatTip('进行中', workloadExecutingNum, workloadExecutingRateStr, '小时'),
                                    link: getLink('处理中', ''),
                                    hide: Number(workloadExecutingNum) === 0
                                },
                                {
                                    text: `待执行 ${workloadNonexecutionNum} 小时，${workloadNonexecutionRateStr}`,
                                    style: {
                                        backgroundColor: '#FFD666',
                                        width: workloadNonexecutionRateStr
                                    },
                                    tip: formatTip(
                                        '待执行',
                                        workloadNonexecutionNum,
                                        workloadNonexecutionRateStr,
                                        '小时'
                                    ),
                                    link: getLink('待办', ''),
                                    hide: Number(workloadNonexecutionNum) === 0
                                }
                            ]}
                        />
                    </Row>
                    <Row style={{ marginTop: 24 }}>
                        <div className={styles.subTitle}>任务达成分布</div>
                        <ScaleBar
                            scaleData={[
                                {
                                    text: `正常达成 ${normalDoneTaskNum}个，${normalDoneRateStr}`,
                                    style: { backgroundColor: '#597EF7', width: normalDoneRateStr },
                                    tip: formatTip('正常达成', normalDoneTaskNum, normalDoneRateStr),
                                    link: getLink('完成', '正常'),
                                    hide: Number(normalDoneTaskNum) === 0
                                },
                                {
                                    text: `逾期达成 ${overdueDoneTaskNum}个，${overdueDoneRateStr}`,
                                    style: { backgroundColor: '#85A5FF', width: overdueDoneRateStr },
                                    tip: formatTip('逾期达成', overdueDoneTaskNum, overdueDoneRateStr),
                                    link: getLink('完成', '逾期'),
                                    hide: Number(overdueDoneTaskNum) === 0
                                },
                                {
                                    text: `逾期未达成 ${overdueNonexecutionTaskNum}个，${overdueNonexecutionRateStr}`,
                                    style: { backgroundColor: '#ADC6FF', width: overdueNonexecutionRateStr },
                                    tip: formatTip(
                                        '逾期未达成',
                                        overdueNonexecutionTaskNum,
                                        overdueNonexecutionRateStr
                                    ),
                                    link: getLink('待办', '逾期'),
                                    hide: Number(overdueNonexecutionTaskNum) === 0
                                }
                            ]}
                        />
                    </Row>
                </Col>
                <Col span={12} style={{ paddingRight: 24, height: '100%', borderLeft: '1px solid #efefef' }}>
                    <TaskLine data={companyTaskDateVOList} />
                </Col>
            </Row>
        </Card>
    );
};
export default StaffCard;
